<template>
  <div class="trad-tool">
    <ul class="tool-header">
      <li>
        <div class="big-title">Do More of What Works<br>
          And Less of What Doesn’t</div>
        <div class="small-title mt30">创建满足您交易需求的工具库</div>
        <hr class="line">
        <div class="kuaisuliaojie">快速了解</div>
        <ul class="leibie mt30">
          <li>4种资产类别</li>
          <li class="ml100">100+ 交易品种</li>
        </ul>
      </li>
      <li>
        <img src="../../assets/images/tool.png"
             alt="">
      </li>
    </ul>
    <div class="diejiagongju-wrap mt50">
      <div class="diejiagongju w200">
        <div class="english">Main Chart Overlay Tool</div>
        <div class="chinese">同图商品叠加工具</div>
      </div>
      <div class="gaitoll">该工具可以让投资者清晰地了解到两种商品任意周期
        任意K线的相对强弱，此外还可识别突破的有效性</div>
      <ul class="img-news mt50">
        <li>
          <img src="../../assets/images/jiagebiandong.png"
               class="w475"
               alt="">
        </li>
        <li class="ml30">
          <div class="line-aa">设置两种颜色，可清晰呈现不同品种
            单根K线的相对强弱</div>
          <div class="w357 MQL4 mt50">一款做产品相关性比对的指标工具，放在
            \MQL4\Indicators文件夹下
            在想要比对的产品周期图中拖入该指标，并修改想
            要比对的产品名称（SubSymbol里面修改MT4里面
            的比对产品名称）</div>
        </li>
      </ul>
    </div>
    <div class="begin-invitor">
      <div class="btn">开始投资</div>
      <div class="diejiagongju">
        <div class="english">MACD Pro Indicator</div>
        <div class="chinese">MACD专业指标(双线)</div>
      </div>
      <div class="tc">
        <img src="../../assets/images/macd.png"
             alt="">
      </div>
    </div>
    <ul class="guonei-wrap">
      <li class="item">
        <div class="guonei">
          <div class="guonei-title">
            这是一款国内股票和期货常
            用的MACD指标工具，
            与MT4自带的MACD相比,
            更加符合国人的看盘习惯
          </div>
          <div class="mt50 guonei-link">者可以根据自身需求来确定 <a href="###">了解MT4</a></div>
        </div>
      </li>
      <li class="second item">
        <div class="guobei-second-title">MACD常见的使用方式</div>
        <div class="guobei-second">顶/底背离——MACD的背离使用看线或者看柱均可，以柱状图为例，柱线出现第一个高点和第二个次高点之后，柱线回落至两个高点之间的最低
          值，则顶背离确认，相反的情况则为底背离</div>
        <div class="guobei-second">MACD是较为复杂的指标，因此可以衍生出相对个性化的使用方式，投资者可以根据自身需求来确定</div>
      </li>
    </ul>
    <ul class="guonei-wrap">
      <li class="item">
        <img src="../../assets/images/mtd.png"
             alt="">
      </li>
      <li class="item">
        <div class="line-aa">MTDriver Profit/Loss Statistical Indicator</div>
        <div class="w357 MQL4 mt50">MTDriver盈亏统计指标</div>
        <div>该工具可以帮助投资者
          精确地定位不同周期的盈亏</div>
        <div>大多数交易者对自己的盈亏状况只有
          一个较为模糊的认知。对于日内、波段和长线
          交易者而言，该工具均可使其对自己的
          盈利能力有更清晰的认知</div>
        <div>放在\MQL4\Indicators文件夹下，一款记录每个交易日盈亏情况的指标类工具，
          有助于交易者清楚看到自己每日的账户盈亏情况</div>
      </li>
    </ul>
    <div class="diejiagongju-wrap mt50">
      <div class="diejiagongju w200">
        <div class="english">Main Chart Overlay Tool</div>
        <div class="chinese">同图商品叠加工具</div>
      </div>
      <div class="gaitoll">该工具可以让投资者清晰地了解到两种商品任意周期
        任意K线的相对强弱，此外还可识别突破的有效性</div>
      <ul class="img-news mt50">
        <li class="ml30">
          <div class="line-aa">设置两种颜色，可清晰呈现不同品种
            单根K线的相对强弱</div>
          <div class="w357 MQL4 mt50">一款做产品相关性比对的指标工具，放在
            \MQL4\Indicators文件夹下
            在想要比对的产品周期图中拖入该指标，并修改想
            要比对的产品名称（SubSymbol里面修改MT4里面
            的比对产品名称）</div>
        </li>
        <li>
          <img src="../../assets/images/jiagebiandong.png"
               class="w475"
               alt="">
        </li>
      </ul>
      <ul class="img-news mt50">
        <li>
          <img src="../../assets/images/jiagebiandong.png"
               class="w475"
               alt="">
        </li>
        <li class="ml30">
          <div class="line-aa">设置两种颜色，可清晰呈现不同品种
            单根K线的相对强弱</div>
          <div class="w357 MQL4 mt50">一款做产品相关性比对的指标工具，放在
            \MQL4\Indicators文件夹下
            在想要比对的产品周期图中拖入该指标，并修改想
            要比对的产品名称（SubSymbol里面修改MT4里面
            的比对产品名称）</div>
        </li>
      </ul>
      <ul class="img-news mt50">
        <li>
          <img src="../../assets/images/jiagebiandong.png"
               class="w475"
               alt="">
        </li>
        <li>
          <img src="../../assets/images/jiagebiandong.png"
               class="w475"
               alt="">
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
}
</script>
<style scoped>
.trad-tool {
  background: #fbfbfb;
  min-width: 980px;
}
.tool-header {
  padding: 6% 5% 10% 10%;
  display: flex;
  flex-direction: row;
  background: #fff;
}
.big-title {
  font-family: ACaslonPro-Regular;
  font-size: 42px;
  color: #1e1e1e;
  letter-spacing: 1.05px;
  line-height: 48px;
}
.small-title {
  font-family: STZhongsong;
  font-size: 22px;
  color: #6b6b6b;
  letter-spacing: 0;
  text-align: justify;
  line-height: 23px;
}
.line {
  width: 240px;
  border: 1px solid #c8161d;
  margin-left: 0;
  margin-top: 50px;
}
.kuaisuliaojie {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #6b6b6b;
  letter-spacing: 0;
  margin-top: 50px;
}
.leibie {
  display: flex;
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #6b6b6b;
  letter-spacing: 0;
  text-align: justify;
  line-height: 23px;
}
.diejiagongju {
  border-top: 1px solid #c8161d;
  text-align: center;
  margin: 0 auto;
  line-height: 30px;
}
.english {
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #1e1e1e;
  letter-spacing: 0.32px;
}
.chinese {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #6b6b6b;
  letter-spacing: 0;
}
.gaitoll {
  width: 575px;
  margin: 20px auto;
  font-family: STZhongsong;
  font-size: 25px;
  color: #1e1e1e;
  letter-spacing: 0;
  text-align: center;
  line-height: 68px;
}
.news {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #6b6b6b;
  letter-spacing: 0;
  text-align: justify;
}
.img-news {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-center;
  justify-content: center;
}
.line-aa {
  border-top: 2px solid #c8161d;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #6b6b6b;
  letter-spacing: 0;
  text-align: justify;
  line-height: 25px;
  width: 475px;
  padding-right: 210px;
  box-sizing: border-box;
  padding-top: 20px;
}
.MQL4 {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #6b6b6b;
  letter-spacing: 0;
  text-align: justify;
  line-height: 29px;
}
.btn {
  width: 135px;
  height: 40px;
  border-radius: 1px;
  text-align: center;
  line-height: 40px;
  color: #008aed!;
  margin: 20px auto;
  cursor: pointer;
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  border-radius: 2px;
}
.guonei {
  font-family: STZhongsong;
  font-size: 30px;
  color: #1e1e1e;
  letter-spacing: 0;
  line-height: 46px;
}
.guonei-wrap {
  display: flex;
  justify-content: space-between;
  padding: 5% 11% 0 11%;
}
.second {
  border-bottom: 1px solid red;
}
.guonei-title {
  font-family: STZhongsong;
  font-size: 30px;
  color: #1e1e1e;
  letter-spacing: 0;
  line-height: 46px;
}
.guonei-link {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #6b6b6b;
  letter-spacing: 0;
}
.item {
  width: 390px;
}
.guobei-second-title {
  font-family: STZhongsong;
  font-size: 25px;
  color: #1e1e1e;
  letter-spacing: 0;
  line-height: 46px;
}
.guobei-second {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #6b6b6b;
  letter-spacing: 0;
  text-align: justify;
  line-height: 20px;
}
</style>